<template>
  <div class="mt-search-input">

    <div v-if="label" class="search-label">{{ label }}</div>
    <input
      v-model="val"
      :placeholder="placeholder"
      :style="{ 'width': width }"
      class="search-input"
      @keyup.enter="getKey" />

  </div>
</template>

<script>
export default {
  name: "mt-search-input",

  props: {
    value: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "180px"
    },
    placeholder: {
      type: String,
      default: ""
    }
  },

  data () {
    return {
      val: this.value
    };
  },

  computed: {
    placeholderValue () {
      if (this.config.placeholder) {
        return this.config.placeholder;
      } else {
        return "请输入" + this.config.label;
      }
    }
  },

  watch: {
    value (val) {
      this.val = val;
    },
    val (val) {
      this.$emit( "input", val.trim() );
    }
  },

  created () {
  },

  mounted () {
  },

  methods: {
    /* 绑定回车触发 */
    getKey ( e ) {
      if ( e.keyCode === 13 ) {
        this.searchFunc();
      }
    },

    searchFunc () {
      this.$emit( "enter" );
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.mt-search-input {
    display: flex;
    margin-right: 20px;
    .search-label {
        color: #939393;
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        margin-right: 10px;
    }
    .search-input {
        border: 1px solid #e8e8e8;
        color: rgba(102, 102, 102, 1);
        height: 32px;
        background-image: none;
        border-radius: 4px;
        padding: 0 15px;
        outline: none;
        width: 180px;
        font-size: 14px;
    }
    input::-webkit-input-placeholder { color: rgba(170, 178, 189, 1); }
    :-moz-placeholder { color: rgba(170, 178, 189, 1); }
    ::-moz-placeholder { color: rgba(170, 178, 189, 1); }
    input:-ms-input-placeholder{ color: rgba(170, 178, 189, 1); }
    input::-ms-input-placeholder{ color: rgba(170, 178, 189, 1); }

    &--btn {
        margin-left: 20px;
    }
}
</style>
